<html>
<head>
  <title>Calculating Area - Vue.js in Action</title>
  <script src="https://unpkg.com/vue/dist/vue.js" 
    type="text/javascript"></script>
</head>
<body>
  <div id="app">
    <p>
      Area is equal to: {{ area }}     //#A
    </p>
    <p>
      <button v-on:click="length += 1">Add length</button>     //#B
      <button v-on:click="width += 1">Add width</button>       //#B
    </p>
  </div>
  <script type="text/javascript">
    var app = new Vue({
      el: '#app',
      data: {
        length: 5,     //#C
        width: 3       //#C
      },
      computed: {
        area: function() {                     //#D
          return this.width * this.length;     //#D
        }                                      //#D
      },
      watch: {
        length: function(newVal, oldVal) {                //#E
          console.log('The old value of length was: '     //#E
                      + oldVal +                          //#E
                      '\nThe new value of length is: '    //#E
                      + newVal);                          //#E
        },
        width: function(newVal, oldVal) {                 //#F
          console.log('The old value of width was: '      //#F
                      + oldVal +                          //#F
                      '\nThe new value of width is: '     //#F
                      + newVal);                          //#F
        },
        area: function(newVal, oldVal) {                  //#G
          console.log('The old value of area was: '       //#G
                      + oldVal +                          //#G
                      '\nThe new value of area is: '      //#G
                      + newVal);                          //#G
        }
      },
      beforeUpdate: function() {                             //#H
        console.log('All those data changes happened '       //#H
                    + 'before the output gets updated.');    //#H
      }
    });
  </script>
</body>
</html>
